<template>
<div class="switch-control">
      <input type="checkbox" v-model="enable" disabled/>
      <div class="switch-content">
            <div class="switch-switcher">{{enable?'是':'否'}}</div>
      </div>
</div>
</template>
<script>
export default {
      data(){
            return{}
      },
      props:{
            enable:{
                  default:false
            }
      }
}
</script>
<style lang="scss" scoped>
.switch-control{
  margin:auto;
  position: relative;
  input{
        position: absolute;
        top:0;
        left:0;
        width:4rem;
        height:100%;
        opacity: 1;
        z-index: 2;
        cursor: pointer;
        display: none;
  }
}

// 滑道
.switch-control div.switch-content{
  width:4rem;
  height:1.5rem;
  border-radius: 1rem 1rem;
  background-color: #0e394f;
  padding-top:0.1rem;
  transition: all 0.3s ease-in-out;
      border: 1px solid #03c5c9;
}

// 滑块
.switch-control div.switch-switcher{
  width:2.25rem;
  line-height:1.5rem;
  height: 1.4rem;
  position: relative;
  top: -0.1rem;
  font-size:0.7rem;
  margin-left:0;
  border-radius: 0.65rem;
  background-color: #03c5c9;
  color:#fff;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.switch-control input:checked + div.switch-content{
}
.switch-control input:checked + div.switch-content div.switch-switcher{
  margin-left:1.75rem;
  background:#03c5c9;
}
</style>
